@import "common"

body, html
  height 100%
  margin 0
  padding 0
  font-family 'monaco', 'menlo', serif, sans-serif
  font-size 16px
  background-color #fff

#app
  height 100%

/* login */
.df-login
  fj(center, center)
  height 100%
  background-color Black

/* header */
.df-header
  fj(space-between)
  height 50px
  padding 0 20px
  border-bottom 3px solid Green
  line-height 50px
  bc(White, Green)
  .logo
    & > a
      text-decoration none
      color Green
  .user
    fj(flex-start, center)
    .name
      position relative
      margin 0 30px 0 20px
      text-shadow 1px 1px 1px hsla(100, 0%, 50%, 1)
      color Black
      &::before
        position absolute
        top 0
        left -15px
        color Light-Orange
        content '\201C'
      &::after
        position absolute
        top 0
        right -15px
        color Light-Orange
        content '\201D'
    .menu
      height 50px
      overflow hidden
      .avatar
        wh(40px, 40px)
        margin-top 5px
        border-radius 40px
        cursor pointer

/* main */
.df-main
  fj()
  min-height 100%
  .df-content
    width 100%
    padding 20px
    .breadcrumb
      margin-bottom 20px
      a
        text-decoration none
        &:hover
          color Orange !important
      i
        margin-right 2px

/* home */
.df-home
  .statistics
    fj()
    .box
      fj()
      flex-direction column
      width 25%
      margin-right 50px
      padding 20px
      border 1px solid Extra-Light-Grey
      border-radius 3px
      text-align center
      i
        font-size 5em
        color Green
        &:hover
          cursor pointer
          animation tfIcon 4s ease
      span
        margin-top 20px
        font-size 2em
        color Silver
  .main
    fj(space-between)
    margin-top 50px
    .lately
      width 25%
      .billboard
        margin-bottom 20px
        border-bottom 1px solid Extra-Light-Grey
        color Silver
        i
          margin-right 20px
          color Red
      .item
        fj(space-between)
        margin 10px 0
        .publish-time
          font-size .7em
          color Silver
        .avatar
          wh(40px,40px)
          border-radius 40px

/* user */
.df-user-wrapper
  .avatar-wrapper
    position absolute
    top 20%
    left 20%
    .avatar
      wh(200px, 200px)
      border-radius 200px
      box-shadow 0 1px 1px rgba(0, 0, 0, .2)
      cursor pointer
  .df-user
    display flex
    flex-direction column
    .item
      margin 0 auto
      padding 10px 0
      label
        padding 10px
        border 1px solid #ddd
        border-radius 5px
        color Silver
      p
        display inline-block
        margin 0
        padding 10px
        border-bottom 1px dashed Light-Green
        color Green
        .default
          color Orange

/* 诗文详情 */
.df-poemView, .df-appreciationView
  fj(center, center)
  flex-direction column
  margin-bottom 20px
  padding 20px
  border 1px solid Extra-Light-Grey
  color Silver
  .title
    margin 10px 0
    font-size 2em
  .poem
    font-size .8em
    margin-bottom 5px
  .info
    fj()
    font-size .8em
    .item
      margin-right 10px
      i
        margin-right 5px
  .main
    padding 20px 0
    word-break break-all
  a
    text-decoration none
    color Green